import React,{Component} from 'react';
import { Layout,Form, Icon, Input, Button} from 'antd';
import {connect} from 'dva';

const { Content } = Layout;
const FormItem = Form.Item;

const Login = ({dispatch,form:{getFieldDecorator,validateFieldsAndScroll}}) =>{
    function handleOk () {
        validateFieldsAndScroll((errors,values) => {
            if (errors) {
                return errors
            }
            dispatch({
                type:'login/login',
                payload: values
            })
        })
    }
    return(
        <Layout style={styles.login}>
            <Content style={styles.loginBox}>
                <div style={styles.textHeader}><h1>Pjee</h1></div>
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <FormItem>
                        {getFieldDecorator('userName', {
                            rules: [{ required: true, message: '请输入你的账号！' }],
                        })(
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户密码" />
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入你的密码！' }],
                        })(
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit"  onClick={handleOk} style={styles.loginbtn} >
                            登录
                        </Button>
                    </FormItem>
                </Form>
            </Content>
        </Layout>
    )
}

export default connect(({login})=>({login}))(Form.create()(Login));

const styles={
    login:{
      width:"100%",
      height:'100vh'
    },
    textHeader:{
      textAlign:'center'
    },
    loginBox:{
        position:'absolute',
        top:'50%',
        left:'50%',
        margin:'-160px 0 0 -160px',
        width:'320px',
        height:'320px',
        padding:'36px',
        boxShadow:'0 0 100px rgba(0,0,0,.08)'
    },
    loginbtn:{
        margin:'0 auto',
        width: '100%'
    }
}
